// tasks 数据结构
let tasks = [
    {
        id: 1, text: "睡觉", completed: false
    },
    {
        id: 2, text: "吃饭", completed: false
    },
    {
        id: 3, text: "打豆豆", completed: false
    },
];
console.log(tasks);


// 给添加按钮增加点击事件，先获取按钮
let addTaskBtn = document.querySelector("#addTaskBtn");
let inputText = document.querySelector("#taskInput");
let ul = document.querySelector("#taskList");
window.addEventListener('load',function () {
    //渲染
    renderTask(tasks)
})
addTaskBtn.addEventListener('click', function () {
    //数据添加
    //1.产生数据-task对象
    //数组最后一个值加一
    let id = tasks[tasks.length - 1].id + 1;
    const task = {
        id: id, text: inputText.value, completed: false
    };
    //2.将对象放到tasks数组中
    tasks.push(task)
    //渲染
    renderTask(tasks)
});


function renderTask(tasks) {
    //清空现有的ul中html
    ul.innerHTML = '';
    tasks.forEach(task => {
        const li = document.createElement("li")
        li.innerHTML = `
            <input type="checkbox" ${task.completed ? 'checked' : ''}>
            <span>${task.text}</span>
            <button>删除</button>
        `
        ul.appendChild(li)
        //生成统计数据
        let all = tasks.length;
        let completed = tasks.filters(task=>{task.completed}).length;
        let uncompleted = all - completed;
        //修改对应元素的数据
        const spans =document.querySelectorAll('.footer span');
        spans[0].textContent = `全部${all}`;
        spans[1].textContent = `已完成${completed}`
        spans[2].textContent = `未完成${uncompleted}`
        //获取元素的另外的方法
        document.querySelector('')
    });

}


